<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>姓名案例_计算属性简写</title>
        <script src="../js/vue.js" type="text/javascript"></script>
    </head>

    <body>
        <!-- vue容器 -->
        <div id="root">
            <input type="text" placeholder="请输入姓" v-model="firstName"><br><br>
            <input type="text" placeholder="请输入名" v-model="lastName"><br><br>
            <span>{{fullName}}</span>
        </div>

        <script type="text/javascript">
            const vm = new Vue({
                el:'#root',
                data:{
                    firstName:'杨',
                    lastName:'启锐'
                },
                methods:{},
                computed:{
                    fullName:function(){
                        return this.firstName + '-' + this.lastName
                    }
                }
            })
        </script>
    </body>
</html>